<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
	<title>Editor example - Join tables - one-to-many join</title>
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.0/css/buttons.dataTables.min.css">
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.0/css/select.dataTables.min.css">
	<link rel="stylesheet" type="text/css" href="../../css/editor.dataTables.min.css">
	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
	<style type="text/css" class="init">
	
	</style>
	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.3.min.js">
	</script>
	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js">
	</script>
	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.2.0/js/dataTables.buttons.min.js">
	</script>
	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js">
	</script>
	<script type="text/javascript" language="javascript" src="../../js/dataTables.editor.min.js">
	</script>
	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
	</script>
	<script type="text/javascript" language="javascript" src="../resources/demo.js">
	</script>
	<script type="text/javascript" language="javascript" src="../resources/editor-demo.js">
	</script>
	<script type="text/javascript" language="javascript" class="init">
	


var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {
	editor = new $.fn.dataTable.Editor( {
		ajax: "../php/joinArray.php",
		table: "#example",
		fields: [ {
				label: "First name:",
				name:  "users.first_name"
			}, {
				label: "Last name:",
				name:  "users.last_name"
			}, {
				label: "Site:",
				name:  "users.site",
				type:  "select"
			}, {
				"label": "Access:",
				"name": "access[].id",
				"type": "checkbox"
			}
		]
	} );

	$('#example').DataTable( {
		dom: "Bfrtip",
		ajax: {
			url: "../php/joinArray.php",
			type: 'POST'
		},
		columns: [
			{ data: "users.first_name" },
			{ data: "users.last_name" },
			{ data: "sites.name" },
			{ data: "access", render: "[, ].name" }
		],
		select: true,
		buttons: [
			{ extend: "create", editor: editor },
			{ extend: "edit",   editor: editor },
			{ extend: "remove", editor: editor }
		]
	} );
} );



	</script>
</head>
<body class="dt-example">
	<div class="container">
		<section>
			<h1>Editor example <span>Join tables - one-to-many join</span></h1>
			<div class="info">
				<p>When using a joined database tables, there are times when you might wish to use a one-to-many relationship for your data, and display that as an editable
				interface for your system's users.</p>
				<p>On the client-side, Editor achieved this quite simply by making use of DataTables' powerful <a href=
				"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> and <a href=
				"//datatables.net/reference/option/columns.render"><code class="option" title="DataTables initialisation option">columns.render</code></a> options to display the
				data and the <a href="//editor.datatables.net/reference/option/fields.name"><code class="option" title="Editor initialisation option">fields.name</code></a> option
				in Editor. These options all provide the ability to use array based data through Javascript square bracket notation (<code>[]</code>) - see the DataTables <a href=
				"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> documentation for detailed
				information on the syntax that can be used for these options.</p>
				<p>In this case each record in our <code>users</code> database table can have different access privileges granted. The one-to-many link is provided by a join table
				on the database side.</p>
				<p>For the editing interface Editor presents this as a checkbox list of options which the editor can use to select the options they want to assign to a particular
				user.</p>
				<p>On the server-side the Editor PHP and .NET libraries both provide a <code>Join</code> class that can be used to construct complex CRUD queries for one-to-many
				data manipulation. For further information about using the PHP libraries to build an editable DataTable with JOINed tables, please see the join documentation
				(<a href="http://editor.datatables.net/manual/php/joins">PHP</a> | <a href="http://editor.datatables.net/manual/net/joins">.NET</a>).</p>
			</div>
			<table id="example" class="display" cellspacing="0" width="100%">
				<thead>
					<tr>
						<th>First name</th>
						<th>Last name</th>
						<th>Location</th>
						<th>Access</th>
					</tr>
				</thead>
				<tfoot>
					<tr>
						<th>First name</th>
						<th>Last name</th>
						<th>Location</th>
						<th>Access</th>
					</tr>
				</tfoot>
			</table>
			<ul class="tabs">
				<li class="active">Javascript</li>
				<li>HTML</li>
				<li>CSS</li>
				<li>Ajax</li>
				<li>Server-side script</li>
			</ul>
			<div class="tabs">
				<div class="js">
					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {
	editor = new $.fn.dataTable.Editor( {
		ajax: &quot;../php/joinArray.php&quot;,
		table: &quot;#example&quot;,
		fields: [ {
				label: &quot;First name:&quot;,
				name:  &quot;users.first_name&quot;
			}, {
				label: &quot;Last name:&quot;,
				name:  &quot;users.last_name&quot;
			}, {
				label: &quot;Site:&quot;,
				name:  &quot;users.site&quot;,
				type:  &quot;select&quot;
			}, {
				&quot;label&quot;: &quot;Access:&quot;,
				&quot;name&quot;: &quot;access[].id&quot;,
				&quot;type&quot;: &quot;checkbox&quot;
			}
		]
	} );

	$('#example').DataTable( {
		dom: &quot;Bfrtip&quot;,
		ajax: {
			url: &quot;../php/joinArray.php&quot;,
			type: 'POST'
		},
		columns: [
			{ data: &quot;users.first_name&quot; },
			{ data: &quot;users.last_name&quot; },
			{ data: &quot;sites.name&quot; },
			{ data: &quot;access&quot;, render: &quot;[, ].name&quot; }
		],
		select: true,
		buttons: [
			{ extend: &quot;create&quot;, editor: editor },
			{ extend: &quot;edit&quot;,   editor: editor },
			{ extend: &quot;remove&quot;, editor: editor }
		]
	} );
} );</code>
					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
					<ul>
						<li>
							<a href="//code.jquery.com/jquery-1.12.3.min.js">//code.jquery.com/jquery-1.12.3.min.js</a>
						</li>
						<li>
							<a href="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js">https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js</a>
						</li>
						<li>
							<a href=
							"https://cdn.datatables.net/buttons/1.2.0/js/dataTables.buttons.min.js">https://cdn.datatables.net/buttons/1.2.0/js/dataTables.buttons.min.js</a>
						</li>
						<li>
							<a href="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js">https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js</a>
						</li>
						<li>
							<a href="../../js/dataTables.editor.min.js">../../js/dataTables.editor.min.js</a>
						</li>
					</ul>
				</div>
				<div class="table">
					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
				</div>
				<div class="css">
					<div>
						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
						additional CSS used is shown below:</p><code class="multiline language-css"></code>
					</div>
					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
					<ul>
						<li>
							<a href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css</a>
						</li>
						<li>
							<a href=
							"https://cdn.datatables.net/buttons/1.2.0/css/buttons.dataTables.min.css">https://cdn.datatables.net/buttons/1.2.0/css/buttons.dataTables.min.css</a>
						</li>
						<li>
							<a href=
							"https://cdn.datatables.net/select/1.2.0/css/select.dataTables.min.css">https://cdn.datatables.net/select/1.2.0/css/select.dataTables.min.css</a>
						</li>
						<li>
							<a href="../../css/editor.dataTables.min.css">../../css/editor.dataTables.min.css</a>
						</li>
					</ul>
				</div>
				<div class="ajax">
					<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
					loaded.</p>
				</div>
				<div class="php">
					<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
					processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
					documentation</a>.</p>
				</div>
			</div>
		</section>
	</div>
	<section>
		<div class="footer">
			<div class="gradient"></div>
			<div class="liner">
				<h2>Other examples</h2>
				<div class="toc">
					<div class="toc-group">
						<h3><a href="../simple/index.html">Simple initialisation</a></h3>
						<ul class="toc">
							<li>
								<a href="../simple/simple.html">Basic initialisation</a>
							</li>
							<li>
								<a href="../simple/multiRow.html">Multi-row editing</a>
							</li>
							<li>
								<a href="../simple/fieldTypes.html">Field types</a>
							</li>
							<li>
								<a href="../simple/fieldDefaults.html">Setting defaults</a>
							</li>
							<li>
								<a href="../simple/i18n.html">Internationalisation</a>
							</li>
							<li>
								<a href="../simple/inTableControls.html">In table form controls</a>
							</li>
							<li>
								<a href="../simple/server-side-processing.html">Server-side processing</a>
							</li>
							<li>
								<a href="../simple/join.html">Join tables - working with multiple SQL tables</a>
							</li>
						</ul>
					</div>
					<div class="toc-group">
						<h3><a href="./index.html">Advanced initialisation</a></h3>
						<ul class="toc active">
							<li>
								<a href="./formOnlyData.html">Data shown only in the form</a>
							</li>
							<li>
								<a href="./tableOnlyData.html">Data shown in table only</a>
							</li>
							<li>
								<a href="./multiItem.html">Multi-item editing (rows, columns, cells)</a>
							</li>
							<li>
								<a href="./REST.html">REST interface</a>
							</li>
							<li>
								<a href="./deepObjects.html">Complex (nested) JSON data source</a>
							</li>
							<li>
								<a href="./localstorage.html">Ajax override - using localStorage for the data source</a>
							</li>
							<li>
								<a href="./jsonId.html">Row ID source specification</a>
							</li>
							<li>
								<a href="./htmlTable.html">DOM sourced table</a>
							</li>
							<li>
								<a href="./joinSelf.html">Join tables - self referencing join</a>
							</li>
							<li>
								<a href="./joinLinkTable.html">Join tables - link table</a>
							</li>
							<li class="active">
								<a href="./joinArray.html">Join tables - one-to-many join</a>
							</li>
							<li>
								<a href="./upload.html">File upload</a>
							</li>
							<li>
								<a href="./upload-many.html">File upload (many)</a>
							</li>
						</ul>
					</div>
					<div class="toc-group">
						<h3><a href="../extensions/index.html">DataTables extensions</a></h3>
						<ul class="toc">
							<li>
								<a href="../extensions/keyTable.html">Excel like keyboard navigation</a>
							</li>
							<li>
								<a href="../extensions/autoFill.html">Excel like AutoFill feature</a>
							</li>
							<li>
								<a href="../extensions/excel.html">AutoFill and KeyTable together</a>
							</li>
							<li>
								<a href="../extensions/exportButtons.html">Export buttons</a>
							</li>
							<li>
								<a href="../extensions/responsive.html">Responsive table extension</a>
							</li>
							<li>
								<a href="../extensions/rowReorder.html">Row reordering</a>
							</li>
						</ul>
					</div>
					<div class="toc-group">
						<h3><a href="../dates/index.html">Dates and time</a></h3>
						<ul class="toc">
							<li>
								<a href="../dates/dates.html">Date picker</a>
							</li>
							<li>
								<a href="../dates/formatting.html">Formatted dates</a>
							</li>
							<li>
								<a href="../dates/datetime.html">Date and time input</a>
							</li>
							<li>
								<a href="../dates/time.html">Time inputs</a>
							</li>
							<li>
								<a href="../dates/time-increment.html">Time increment options</a>
							</li>
							<li>
								<a href="../dates/options-min-max.html">Options - min and max dates</a>
							</li>
							<li>
								<a href="../dates/options-week-numbers.html">Options - week numbers</a>
							</li>
							<li>
								<a href="../dates/options-disable-days.html">Options - disable days</a>
							</li>
							<li>
								<a href="../dates/i18n.html">Internationalisation</a>
							</li>
							<li>
								<a href="../dates/jqueryui.html">jQuery UI DatePicker</a>
							</li>
							<li>
								<a href="../dates/jqueryui-formatting.html">jQuery UI DatePicker with custom formatting</a>
							</li>
							<li>
								<a href="../dates/html5.html">HTML5 date input</a>
							</li>
						</ul>
					</div>
					<div class="toc-group">
						<h3><a href="../inline-editing/index.html">Inline editing</a></h3>
						<ul class="toc">
							<li>
								<a href="../inline-editing/simple.html">Simple inline editing</a>
							</li>
							<li>
								<a href="../inline-editing/tabControl.html">Tab between columns</a>
							</li>
							<li>
								<a href="../inline-editing/options.html">Editing options - submit on blur</a>
							</li>
							<li>
								<a href="../inline-editing/submitData.html">Editing options - submit full row data</a>
							</li>
							<li>
								<a href="../inline-editing/submitButton.html">Inline editing with a submit button</a>
							</li>
							<li>
								<a href="../inline-editing/editIcon.html">Edit icon</a>
							</li>
							<li>
								<a href="../inline-editing/join.html">Joined tables</a>
							</li>
							<li>
								<a href="../inline-editing/columns.html">Selected columns only</a>
							</li>
							<li>
								<a href="../inline-editing/responsive.html">Responsive integration</a>
							</li>
							<li>
								<a href="../inline-editing/fixedcolumns.html">FixedColumns integration</a>
							</li>
						</ul>
					</div>
					<div class="toc-group">
						<h3><a href="../bubble-editing/index.html">Bubble editing</a></h3>
						<ul class="toc">
							<li>
								<a href="../bubble-editing/simple.html">Simple bubble editing</a>
							</li>
							<li>
								<a href="../bubble-editing/grouped.html">Multiple fields in a bubble</a>
							</li>
							<li>
								<a href="../bubble-editing/options.html">Form control and display options</a>
							</li>
							<li>
								<a href="../bubble-editing/defaultOptions.html">Default control and display options</a>
							</li>
							<li>
								<a href="../bubble-editing/inTableControls.html">Bubble editing with in table row controls</a>
							</li>
						</ul>
					</div>
					<div class="toc-group">
						<h3><a href="../api/index.html">API</a></h3>
						<ul class="toc">
							<li>
								<a href="../api/confirmClose.html">Events - unsaved changes close confirmation</a>
							</li>
							<li>
								<a href="../api/dependentFields.html">Dependent fields</a>
							</li>
							<li>
								<a href="../api/clientValidation.html">Client-side validation</a>
							</li>
							<li>
								<a href="../api/triggerButton.html">Customised control buttons</a>
							</li>
							<li>
								<a href="../api/backNext.html">Previous / next editing buttons</a>
							</li>
							<li>
								<a href="../api/cancelButton.html">Cancel button</a>
							</li>
							<li>
								<a href="../api/checkbox.html">Always shown checkbox</a>
							</li>
							<li>
								<a href="../api/duplicateButton.html">Duplicate button</a>
							</li>
							<li>
								<a href="../api/removeMessage.html">Custom delete / remove message</a>
							</li>
						</ul>
					</div>
					<div class="toc-group">
						<h3><a href="../standalone/index.html">Standalone</a></h3>
						<ul class="toc">
							<li>
								<a href="../standalone/simple.html">Simple standalone editing</a>
							</li>
							<li>
								<a href="../standalone/bubble.html">Bubble editing</a>
							</li>
							<li>
								<a href="../standalone/inline.html">Inline editing</a>
							</li>
							<li>
								<a href="../standalone/collection.html">Standalone collection editor</a>
							</li>
						</ul>
					</div>
					<div class="toc-group">
						<h3><a href="../styling/index.html">Styling</a></h3>
						<ul class="toc">
							<li>
								<a href="../styling/bootstrap.html">Bootstrap</a>
							</li>
							<li>
								<a href="../styling/foundation.html">Foundation</a>
							</li>
							<li>
								<a href="../styling/jqueryui.html">jQuery UI</a>
							</li>
							<li>
								<a href="../styling/fieldDisplay.html">Field display styling options</a>
							</li>
							<li>
								<a href="../styling/columns.html">Multi-column layout</a>
							</li>
							<li>
								<a href="../styling/large.html">Large window layout</a>
							</li>
							<li>
								<a href="../styling/stackedInputs.html">Stacked inputs</a>
							</li>
							<li>
								<a href="../styling/envelope.html">Envelope display controller</a>
							</li>
							<li>
								<a href="../styling/envelopeInTable.html">Envelope display with in table controls</a>
							</li>
						</ul>
					</div>
					<div class="toc-group">
						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
						<ul class="toc">
							<li>
								<a href="../plug-ins/fieldPlugin.html">Custom field type plug-ins</a>
							</li>
							<li>
								<a href="../plug-ins/displayController.html">Custom display controller</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="epilogue">
					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
				</div>
			</div>
		</div>
	</section>
</body>
</html>